<template>
  <label
    for="Toggle1"
    class="inline-flex items-center space-x-4 cursor-pointer dark:text-gray-100"
  >
    <span>Left</span>
    <span class="relative">
      <input
        id="Toggle1"
        type="checkbox"
        class="hidden peer"
        @click="toggleDarkMode"
      />
      <div
        class="w-10 h-6 rounded-full shadow-inner dark:bg-gray-400 peer-checked:dark:bg-violet-400"
      ></div>
      <div
        class="absolute inset-y-0 left-0 w-4 h-4 m-1 rounded-full shadow peer-checked:right-0 peer-checked:left-auto dark:bg-gray-800"
      ></div>
    </span>
    <span>Right</span>
  </label>
</template>

<script setup>
const props = defineProps(["toggleDarkMode"]);
</script>
